<template>
  <div>
    <TablePageContainer>
      <template #header>
        <el-form :model="table.params" :inline="true">
          <el-form-item label="用户账号">
            <el-input v-model="table.params.username" placeholder="请输入用户账号" />
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="table.params.nickName" placeholder="请输入用户姓名" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="table.params.sex" placeholder="请选择性别" clearable filterable>
              <el-option :value="1" label="男" />
              <el-option :value="2" label="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="table.params.phoneNum" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="table.params.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="table.params.status" placeholder="请选择状态" clearable filterable>
              <el-option :value="1" label="启用" />
              <el-option :value="2" label="禁用" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #operation>
        <el-button type="primary" @click="handleCloneSaveOrEditDialog(true)">新增</el-button>
        <el-button type="danger" :disabled="table.selectionRows.length <= 0" @click="handleDel">批量删除</el-button>
      </template>
      <template #table>
        <el-table v-loading="table.loading" :data="table.data" border stripe @selection-change="handleTableSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="头像" width="100" align="center">
            <template slot-scope="scope">
              <el-avatar class="table_pic" :size="34" shape="square" :src="scope.row.avatar">
                <i class="fa-solid fa-user" />
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户账号" align="center" />
          <el-table-column prop="nickName" label="用户姓名" align="center" />
          <el-table-column prop="dept.name" label="部门" align="center" />
          <el-table-column label="角色" align="center">
            <template slot-scope="scope">
              <el-tag v-for="role in scope.row.roleList" :key="role.id" size="mini">{{ role.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phoneNum" label="手机号码" align="center" />
          <el-table-column prop="email" label="电子邮箱" align="center" />
          <el-table-column label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :disabled="scope.row.isAdministrator === 1" @change="handleStatusChange(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column prop="createdTime" label="创建时间" width="160" align="center" sortable />
          <el-table-column prop="updatedTime" label="修改时间" width="160" align="center" sortable />
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="fa fa-pen-to-square" @click="handleEditPassword(scope.row)">修改密码</el-button>
              <el-button v-if="scope.row.isAdministrator === 2" type="text" icon="fa fa-pen-to-square" @click="handleEdit(scope.row)">修改</el-button>
              <el-button v-if="scope.row.isAdministrator === 2" type="text" icon="fa fa-trash-can" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #page>
        <Pagination :total.sync="table.total" :page.sync="table.params.pageNum" :limit.sync="table.params.pageSize" @pagination="getList" />
      </template>
    </TablePageContainer>

    <SaveOrEdit v-if="saveOrEditDialog.visible" :id="saveOrEditDialog.id" :visible.sync="saveOrEditDialog.visible" :type="saveOrEditDialog.type" @getList="getList" @handleClose="handleCloneSaveOrEditDialog" />

    <EditPassword v-if="editPasswordDialog.visible" :id="editPasswordDialog.id" :visible.sync="editPasswordDialog.visible" @handleClose="handleCloneEditPassword" />
  </div>
</template>
<script>
import { del, editStatus, getPage } from '@/api/user'
import _ from 'lodash'

export default {
  name: 'User',
  components: {
    TablePageContainer: () => import('@/components/TablePageContainer/index.vue'),
    Pagination: () => import('@/components/Pagination/index.vue'),
    SaveOrEdit: () => import('@/views/user/components/SaveOrEdit.vue'),
    EditPassword: () => import('@/views/user/components/EditPassword.vue')
  },
  data() {
    return {
      table: {
        params: {
          username: '',
          nickName: '',
          sex: undefined,
          phoneNum: '',
          email: '',
          status: undefined,
          pageNum: 1,
          pageSize: 10
        },
        defaultParams: undefined,
        loading: false,
        data: [],
        total: 0,
        selectionRows: []
      },
      saveOrEditDialog: {
        visible: false,
        type: undefined,
        id: undefined
      },
      editPasswordDialog: {
        visible: false,
        id: undefined
      }
    }
  },
  created() {
    this.table.defaultParams = _.cloneDeep(this.table.params)
    this.getList()
  },
  methods: {
    getList() {
      this.table.loading = true
      getPage(this.table.params).then(res => {
        this.table.data = res.data.records
        this.table.total = res.data.total
        this.table.loading = false
      })
    },
    handleTableSelectionChange(val) {
      this.table.selectionRows = val
    },
    handleStatusChange(row) {
      editStatus({ id: row.id, status: row.status }).then((res) => {
        this.$message.success('修改成功')
      })
    },
    handleEditPassword(row) {
      this.handleCloneEditPassword(true)
      this.editPasswordDialog.id = row.id
    },
    handleEdit(row) {
      this.handleCloneSaveOrEditDialog(true)
      this.saveOrEditDialog.type = 'edit'
      this.saveOrEditDialog.id = row.id
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        if (this.table.selectionRows.length > 0) {
          this.table.selectionRows.forEach(item => {
            if (item.isAdministrator === 1) {
              this.$message.warning('存在超级管理员账户, 不允许删除')
              return
            }
            ids.push(item.id)
          })
        }

        if (row.id) {
          ids.push(row.id)
        }

        if (ids.length <= 0) {
          return
        }

        del(ids).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    handleCloneSaveOrEditDialog(v) {
      this.saveOrEditDialog.type = undefined
      this.saveOrEditDialog.id = undefined
      this.saveOrEditDialog.visible = v
    },
    handleCloneEditPassword(v) {
      this.editPasswordDialog.id = undefined
      this.editPasswordDialog.visible = v
    },
    handleReset() {
      this.table.params = _.cloneDeep(this.table.defaultParams)
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
